<template>
  <div class="activity-body">
    <div class="activity-ad">
    </div>
    <div class="activity-wrap">
      <div class="promotion-box">
        <img src="./img/promotionhead.png"
             class="promotion-head"
             alt="">
        <div class="promotion-title">获得红包名单</div>
        <div style="margin: 30px auto 0;width: 440px;">
          <slide-list style="margin-top: 30px;"
                      :list="list"
                      index="2"
                      :listRow="5"
                      :listCol="1"
                      packet>
          </slide-list>
        </div>
      </div>
      <div class="promotion-box">
        <img src="./img/promotionhead.png"
             class="promotion-head"
             alt="">
        <div class="promotion-title">获取红包攻略</div>
        <activityTask :myAccount="myAmount" ></activityTask>
      </div>
      <div class="promotion-box">
        <img src="./img/promotionhead.png"
             class="promotion-head"
             alt="">
        <div class="promotion-title">活动规则</div>
        <div class="promotion-content">1、活动商品不支持退换货。</div>
        <div class="promotion-content">2、活动最终解释权归刀具联盟所有。</div>
        <div class="promotion-content red">3、注：采购额特指商品实付款金额，不包含其他优惠，如：税费、运费、优惠券等。</div>
      </div>
    </div>
  </div>
</template>

<script>
import { SlideList } from '@/components/index'
import activityTask from './components/activityTask'
import { phoneReplace } from '@/tool/tool'
export default {
  components: {
    SlideList,
    activityTask
  },
  computed: {
  },
  data () {
    return {
      list: [],
      myAmount: 0
    }
  },
  methods: {
  },
  mounted () {
    this.$store.dispatch('getActivityPromotion').then(() => {
      if (this.$store.state.activity.activityPromotionList.voList.length) {
        this.myAmount = this.$store.state.activity.activityPromotionList.voList[0].mySumActivityAmount
        this.list = this.$store.state.activity.activityPromotionList.voList[0].purchaserGetDeductionVOS
      } else {
        this.myAmount = 0
        this.list = []
      }
    })
  },
  filters: {
    phoneReplace
  },
  watch: {
  }
}
</script>

<style lang="scss" scoped>
.activity-body {
  background-color: #e7c9ff;
  padding-bottom: 30px;
}
.activity-ad {
  width: 100%;
  height: 600px;
  background-image: url("./img/promotionbanner.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
.activity-wrap {
  width: 1000px;
  margin: 0 auto;
  .promotion-box {
    margin-top: 60px;
    padding: 50px;
    padding-top: 0;
    position: relative;
    background-color: #fff;
    border-radius: 6px;
    text-align: center;
    .promotion-head {
      width: 1000px;
      left: -50px;
      position: relative;
      top: -30px;
    }
    .promotion-title {
      width: 100%;
      left: 0;
      font-size: 18px;
      color: #ffffff;
      position: absolute;
      top: -6px;
    }
    .promotion-content {
      font-size: 14px;
      color: #666666;
      line-height: 37px;
      text-align: left;
      &.red {
        color: #e90202;
      }
    }
  }
}
</style>
